<template>
  <Hello></Hello>
  <h2>{{ msg_custom }}</h2>
  <input type="text" v-model="msg_custom">

  <h2>{{ delay_msg }}</h2>
  <input type="text" v-model="delay_msg">

  <!-- Teleport Content 可以传送到其他地方 -->
  <Teleport to="body">
    <div class="teleport-content">
      <h2>Teleport Content</h2>
      <p>{{ delay_msg }}</p>
    </div>
  </Teleport>

</template>
<script setup lang="ts">
import {
  ref, reactive, readonly, toRefs, shallowRef,
  shallowReactive, toRaw, customRef
} from 'vue';
import useMsg from '@/hooks/useMsg';

let num = ref(0)

// 只读引用, num的修改会影响到 num_read
let num_read = readonly(num)
let num_shallow = shallowRef(0)
let num_reactive = reactive({ value: 0 })
let car1 = reactive({
  brand: 'Toyota',
  model: 'Camry',
  details: {
    color: 'Red',
    year: 2020
  }
})

// 不可以修改
let car2 = readonly(car1)

// 原始对象
let car_raw = toRaw(car1)

console.log("car1:", car1)
console.log("car_raw:", car_raw)
let msg = "hello"
let msg_custom = customRef((track, trigger) => {
  return {
    get: () => {
      track() // 持续跟踪msg的变化
      return msg
    },
    set: (value: string) => {
      trigger() // 触发更新
      msg = value
    }
  }
})

// 延迟更新
let { msg: delay_msg } = useMsg('useMsg', 1000)


</script>
<style lang="scss" scoped></style>
